<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="ID" label="ID" width="40"></el-table-column>
      <el-table-column prop="name" label="名称" width="160"></el-table-column>
      <el-table-column label="单价" width="80">
        <template slot-scope="scope">
          <div class="cell">{{scope.row.CNY/100}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="point" label="积分" width="80"></el-table-column>
      <el-table-column prop="sum" label="库存" width="80"></el-table-column>
      <el-table-column prop="img" label="封面" width="80">
        <!-- 图片上传成功后 取消注释 -->
        <template slot-scope="scope">
          <img :src="scope.row.imgs[0].url" style="height:4rem;" />
        </template>
      </el-table-column>
      <el-table-column label="分类" width="160">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.typeCid"
            placeholder="请选择"
            @change="upData({where:{ID:scope.row.ID},typeCid:scope.row.typeCid})"
          >
            <el-option
              v-for="item in itemType"
              :key="item.cid"
              :label="item.name"
              :value="item.cid"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="简介">
        <template slot-scope="scope">
          <div class="max" v-html="scope.row.info" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click="$router.push(`/product/edit/${scope.row.ID}`)"
            type="info"
            size="mini"
          >编辑</el-button>
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.state"
            @change="upData({where:{ID:scope.row.ID}, state: scope.row.state})"
          ></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="page.page_sizes"
      :page-size="page.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      page: {
        total: -1,
        page_sizes: [10, 20, 30, 40],
        page_size: 10,
        currentPage: 1,
        itemType: []
      }
    };
  },
  methods: {
    // 页面切换
    pageCurrentChange(val) {
      if (val == undefined) {
        this.page.currentPage = 1;
      } else {
        this.page.currentPage = val;
      }
      this.getData();
    },
    pageSizeChange(val) {
      if (val == undefined) {
        this.page.page_size = 10;
      } else {
        this.page.page_size = val;
      }
      this.pageCurrentChange(1);
    },
    // 获取数据
    getData(cmd) {
      let d = {
        cmd: 0,
        val: {
          token: sessionStorage.token,
          table: "items",
          weight: true
        }
      };
      if (this.page.total < 0) {
        d.val.sum = true;
        this.$axios.post("q.php", d).then(res => {
          if (res.data.result) {
            this.page.total = res.data.result.sum;
            this.getData(cmd);
          } else {
            this.$message({
              showClose: true,
              message: "当前数据为空",
              type: "error"
            });
          }
        });
        return;
      }
      d.val.limit =
        (this.page.currentPage - 1) * this.page.page_size +
        "," +
        this.page.page_size;
      if (cmd) d.val = Object.assign(d.val, cmd);
      this.$axios.post("q.php", d).then(res => {
        if (res.data.result) {
          res.data.result.formatData();
          this.tableData = res.data.result;
          // console.log(this.$cp(res.data.result[0]));
        }
      });
    },
    upData(cmd) {
      if (!cmd) return;
      const data = {
        cmd: 1,
        val: {
          token: sessionStorage.token,
          table: "items"
        }
      };
      data.val = Object.assign(data.val, cmd);
      this.$axios.post("q.php", data).then(res => {
        // console.log(res.data);
        if (res.data.result) {
          this.$message({
            showClose: true,
            message: "修改数据成功",
            type: "success"
          });
        } else {
          this.$message({
            showClose: true,
            message: "修改数据失败!服务器繁忙或登陆过期",
            type: "error"
          });
        }
      });
    }
  },
  created() {
    this.$axios
      .post("q.php", {
        cmd: 0,
        val: {
          token: sessionStorage.token,
          table: "itemtype",
          show: "ID,name,cid"
        }
      })
      .then(res => {
        if (res.data.result) {
          // console.log(this.$cp(res.data.result));
          this.itemType = res.data.result;
        }
      });
    this.getData();
  }
};
</script>

<style  scoped>
.max {
  width: 100%;
  height: 60px;
  /* border: 1px solid rgb(255, 0, 0); */
  overflow: hidden;
}
</style>